<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <script src="https://cdn.jsdelivr.net/npm/iconify-icon@1.0.8/dist/iconify-icon.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2C3E50',
                        secondary: '#ECF0F1',
                        accent: '#3498DB',
                        neutral: '#7F8C8D',
                        dark: '#2C3E50',
                        border: '#BDC3C7'
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .hover-lift {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .hover-lift:hover {
                transform: translateY(-3px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }
        }
    </style>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background-color: #FAFAFA;
        }
        
        .nav-item {
            position: relative;
        }
        
        .nav-item::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: #3498DB;
            transition: width 0.3s ease;
        }
        
        .nav-item:hover::after,
        .nav-item.active::after {
            width: 100%;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="bg-white border-b border-border sticky top-0 z-10">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center gap-2">
                <iconify-icon icon="mdi:web" class="text-accent text-2xl"></iconify-icon>
                <span class="font-bold text-lg text-dark">网站首页</span>
            </div>
            
            <nav class="hidden md:flex items-center gap-6">
                <div class="nav-item active">首页</div>
                <div class="nav-item">功能</div>
                <div class="nav-item">项目</div>
                <div class="nav-item">帮助</div>
            </nav>
            
            <div class="flex items-center gap-4">
                <button class="hidden md:block text-neutral hover:text-accent transition-colors">登录</button>
                <button class="bg-accent text-white px-4 py-1.5 rounded text-sm hover:bg-accent/90 transition-colors">注册</button>
                <iconify-icon icon="mdi:menu" class="md:hidden text-dark cursor-pointer"></iconify-icon>
            </div>
        </div>
    </header>
    
    <!-- 欢迎区域 - 突出显示"欢迎使用"四个大字 -->
    <section class="bg-primary py-20 md:py-32 text-center relative overflow-hidden">
        <!-- 背景装饰元素 -->
        <div class="absolute top-0 left-0 w-full h-full opacity-10">
            <div class="absolute top-10 left-10 w-40 h-40 rounded-full bg-white"></div>
            <div class="absolute bottom-10 right-10 w-60 h-60 rounded-full bg-white"></div>
            <div class="absolute top-1/2 left-1/3 w-20 h-20 rounded-full bg-white"></div>
        </div>
        
        <div class="container mx-auto px-4 relative z-10">
            <h1 class="text-[clamp(3rem,10vw,5rem)] font-extrabold text-white uppercase tracking-wider mb-6">
                欢迎使用
            </h1>
            <p class="text-white/90 text-lg md:text-xl max-w-2xl mx-auto mb-8">
                简洁高效的在线平台，为您提供全方位的服务与支持
            </p>
            <div class="mt-6 flex flex-col sm:flex-row justify-center gap-4">
                <button class="bg-white text-primary font-medium px-6 py-3 rounded hover:bg-gray-100 transition-colors">
                    开始使用
                </button>
                <button class="bg-primary/20 text-white border border-white/30 font-medium px-6 py-3 rounded hover:bg-primary/30 transition-colors">
                    了解更多
                </button>
            </div>
        </div>
    </section>
    
    <!-- 功能快捷入口 -->
    <section class="py-16">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                <div class="bg-white rounded-lg border border-border p-6 hover-lift flex flex-col items-center">
                    <div class="w-14 h-14 rounded-full bg-accent/10 flex items-center justify-center mb-4">
                        <iconify-icon icon="mdi:file-code" class="text-accent text-2xl"></iconify-icon>
                    </div>
                    <h3 class="font-semibold text-dark text-lg text-center">代码管理</h3>
                    <p class="text-neutral text-sm mt-2 text-center">高效的版本控制工具</p>
                </div>
                
                <div class="bg-white rounded-lg border border-border p-6 hover-lift flex flex-col items-center">
                    <div class="w-14 h-14 rounded-full bg-accent/10 flex items-center justify-center mb-4">
                        <iconify-icon icon="mdi:project-management" class="text-accent text-2xl"></iconify-icon>
                    </div>
                    <h3 class="font-semibold text-dark text-lg text-center">项目管理</h3>
                    <p class="text-neutral text-sm mt-2 text-center">任务跟踪与进度管理</p>
                </div>
                
                <div class="bg-white rounded-lg border border-border p-6 hover-lift flex flex-col items-center">
                    <div class="w-14 h-14 rounded-full bg-accent/10 flex items-center justify-center mb-4">
                        <iconify-icon icon="mdi:file-document" class="text-accent text-2xl"></iconify-icon>
                    </div>
                    <h3 class="font-semibold text-dark text-lg text-center">文档中心</h3>
                    <p class="text-neutral text-sm mt-2 text-center">便捷的文档管理系统</p>
                </div>
                
                <div class="bg-white rounded-lg border border-border p-6 hover-lift flex flex-col items-center">
                    <div class="w-14 h-14 rounded-full bg-accent/10 flex items-center justify-center mb-4">
                        <iconify-icon icon="mdi:share-variant" class="text-accent text-2xl"></iconify-icon>
                    </div>
                    <h3 class="font-semibold text-dark text-lg text-center">分享协作</h3>
                    <p class="text-neutral text-sm mt-2 text-center">多人协作与分享功能</p>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 推荐项目 -->
    <section class="py-12 bg-white">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-xl font-semibold text-dark">推荐项目</h2>
                <a href="#" class="text-accent text-sm hover:underline">查看全部</a>
            </div>
            
            <div class="space-y-4">
                <div class="border border-border rounded-lg p-4 hover:bg-secondary transition-colors">
                    <div class="flex flex-col md:flex-row md:items-center justify-between">
                        <div class="flex items-start gap-3">
                            <iconify-icon icon="mdi:folder" class="text-accent text-xl mt-0.5"></iconify-icon>
                            <div>
                                <h3 class="font-medium text-dark">前端框架模板</h3>
                                <p class="text-neutral text-sm mt-1">基于现代框架的前端项目模板，包含常用组件</p>
                            </div>
                        </div>
                        <div class="mt-3 md:mt-0 flex items-center gap-6">
                            <div class="flex items-center gap-1 text-neutral">
                                <iconify-icon icon="mdi:star" class="text-yellow-500"></iconify-icon>
                                <span>2450</span>
                            </div>
                            <div class="flex items-center gap-1 text-neutral">
                                <iconify-icon icon="mdi:download" class="text-accent"></iconify-icon>
                                <span>830</span>
                            </div>
                            <button class="text-sm bg-accent/10 text-accent px-3 py-1 rounded hover:bg-accent/20 transition-colors">
                                 获取
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="border border-border rounded-lg p-4 hover:bg-secondary transition-colors">
                    <div class="flex flex-col md:flex-row md:items-center justify-between">
                        <div class="flex items-start gap-3">
                            <iconify-icon icon="mdi:folder" class="text-accent text-xl mt-0.5"></iconify-icon>
                            <div>
                                <h3 class="font-medium text-dark">后端服务示例</h3>
                                <p class="text-neutral text-sm mt-1">各种后端服务的示例代码，包含完整的API实现</p>
                            </div>
                        </div>
                        <div class="mt-3 md:mt-0 flex items-center gap-6">
                            <div class="flex items-center gap-1 text-neutral">
                                <iconify-icon icon="mdi:star" class="text-yellow-500"></iconify-icon>
                                <span>1520</span>
                            </div>
                            <div class="flex items-center gap-1 text-neutral">
                                <iconify-icon icon="mdi:download" class="text-accent"></iconify-icon>
                                <span>570</span>
                            </div>
                            <button class="text-sm bg-accent/10 text-accent px-3 py-1 rounded hover:bg-accent/20 transition-colors">
                                 获取
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 页脚 -->
    <footer class="bg-white border-t border-border py-8 mt-12">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="flex items-center gap-2 mb-4 md:mb-0">
                    <iconify-icon icon="mdi:web" class="text-accent"></iconify-icon>
                    <span class="text-dark">在线平台</span>
                </div>
                <div class="text-neutral text-sm">
                    © 2023 在线平台. 保留所有权利.
                </div>
            </div>
        </div>
    </footer>

    <script>
        // 导航项切换
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', () => {
                document.querySelectorAll('.nav-item').forEach(nav => nav.classList.remove('active'));
                item.classList.add('active');
            });
        });
    </script>
</body>
</html>
